<html>
<head>
    <title>Ejemplos Javascript: ejemplo pr&aacute;ctico</title>
    <script language="livescript">
    function addChar(input, character){
	    if(input.value == null || input.value == "0"){
	    	
    	    input.value = character
    	    
	    }else{
	    	//alert(character)
        	input.value += character
        }
        focus_calc(input);
    }

    function deleteChar(input,position){
    	if(input.value.substring(0,1)=='0' && input.value.length>1 && input.value.substring(1,2)!='.' && !isNaN(input.value.substring(1,2))){
    		input.value = input.value.substring(1, input.value.length);
    	}else{
    		if(!position){
    			input.value = input.value.substring(0, input.value.length - 1);
    		}
   		}
   		focus_calc(input);
    	
    }

    function changeSign(input){
	    // could use input.value = 0 - input.value, but let's show off substring
    	if(input.value.substring(0, 1) == "-"){
	    	input.value = input.value.substring(1, input.value.length);
    	}else{
	    	input.value = "-" + input.value;
    	}
    	focus_calc(input);
    }

    function compute(form){
    	form.display_calc.value = eval(form.display_calc.value);
    	focus_calc(form.display_calc);
    }

    function square(form){
    	form.display_calc.value = eval(form.display_calc.value) * eval(form.display_calc.value);
    	focus_calc(form.display_calc);
    }

    function checkNum(str){
	    for (var i = 0; i < str.length; i++) {
    	    var ch = str.substring(i, i+1)
        	if (ch < "0" || ch > "9") {
            	if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "(" && ch!= ")" && ch!= "." && ch!= "," && ch!= "e" && ch!= "E") {
	                alert("entrada invalida!")
    	            return false
        	    }
	        }
    	}
    	return true
    }
    
    function focus_calc(input){
    	input.focus();
    }
    </script>
    <style type="text/css">
	body {
    	background-color: white;
    }
    .bot1 input{
    	width: 35px;
    }
    .bot2 input{
    	width: 77px;
    }
    .left{
    	text-align: left;
    }
    .right{
    	text-align: right;
    }
    </style>
</head>

<body onload="">
    <form>
    	<div style="text-align: center;">
			<input
				id="display_calc" name="display_calc" value="0" size="40" class="right"
				onkeyup="
					if(!checkNum(this.value)){deleteChar(this)}
					this.value = this.value.replace(',','.');
					this.value == '' ? this.value=0 : '';
					deleteChar(this,1);
				"
				onchange="compute(this.form);"
			/>
		</div>
        <table border="1" align="center">
            <tr class="bot1" align="center">
                <td><input type="button" value="7" onclick="addChar(this.form.display_calc, '7')"/></td>
                <td><input type="button" value="8" onclick="addChar(this.form.display_calc, '8')"/></td>
                <td><input type="button" value="9" onclick="addChar(this.form.display_calc, '9')"/></td>
                <td><input type="button" value="/" onclick="addChar(this.form.display_calc, '/')"/></td>
            </tr>

            <tr class="bot1" align="center">
                <td><input type="button" value="4" onclick="addChar(this.form.display_calc, '4')"/></td>
                <td><input type="button" value="5" onclick="addChar(this.form.display_calc, '5')"/></td>
                <td><input type="button" value="6" onclick="addChar(this.form.display_calc, '6')"/></td>
                <td><input type="button" value="*" onclick="addChar(this.form.display_calc, '*')"/></td>
            </tr>

            <tr class="bot1" align="center">
                <td><input type="button" value="1" onclick="addChar(this.form.display_calc, '1')"/></td>
                <td><input type="button" value="2" onclick="addChar(this.form.display_calc, '2')"/></td>
                <td><input type="button" value="3" onclick="addChar(this.form.display_calc, '3')"/></td>
                <td><input type="button" value="-" onclick="addChar(this.form.display_calc, '-')"/></td>
            </tr>

            <tr class="bot1" align="center">
                <td><input type="button" value="0"   onclick="addChar(this.form.display_calc, '0')"/></td>
                <td><input type="button" value="."   onclick="addChar(this.form.display_calc, '.')"/></td>
                <td><input type="button" value="+/-" onclick="changeSign(this.form.display_calc)"/></td>
                <td><input type="button" value="+"   onclick="addChar(this.form.display_calc, '+')"/></td>
            </tr>

            <tr class="bot1" align="center">
                <td><input type="button" value="("     onclick="addChar(this.form.display_calc, '(')"/></td>
                <td><input type="button" value=")"     onclick="addChar(this.form.display_calc, ')')"/></td>
                <td><input type="button" value="sq"    onclick="if (checkNum(this.form.display_calc.value)){ square(this.form) }"/></td>
                <td><input type="button" value="&lt;-" onclick="deleteChar(this.form.display_calc)"/></td>
            </tr>

            <tr class="bot2" align="center">
                <td colspan="2"><input type="button" value="enter" name="enter" onclick="if (checkNum(this.form.display_calc.value)){ compute(this.form) }"/></td>
                <td colspan="2"><input type="button" value="c" onclick="this.form.display_calc.value = 0;focus_calc(this.form.display_calc);"/></td>
            </tr>
        </table>
    </form>
</body>
</html>
